<template>
  <div class="login-container">
    <div class="wrap">
      <form id="myform" name="myform">
        <div id="form" class="form">
          <div class="left">
            <img src="@/assets/images/登录.jpg" alt="" />
          </div>
          <div class="right">
            <div class="right-con">
              <h1>USERS LOGIN</h1>
              <h3>ID Number 身份证号</h3>
              <input
                id="uname"
                name="uname"
                class="text"
                type="text"
                v-model="user.idNumber"
              />
              <h3>PassWord 密 码</h3>
              <input
                id="upwd"
                name="upwd"
                class="text"
                type="password"
                v-model="user.password"
              />
              <div id="validate" style="color: red"></div>
              <button class="btn" type="button" @click="handleUserLogin">
                LOGIN 登录
              </button>
              <button class="btn" type="reset" @click="resetForm">
                RESET 重置
              </button>
              <div class="to-register">
                <span @click="toRegister">注册</span>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "userLogin",
  data() {
    return {
      user: {
        idNumber: "",
        password: "",
      },
    }
  },
  
  methods: {
    checkValid() {
      const reg =/(^\d{15}$)|(^\d{17}(\d|X|x)$)/
      if (!this.user.idNumber) {
        this.$message.error("身份证不能为空")
        return false
      } else if (!reg.test(this.user.idNumber)){
        this.$message.error("身份证输入不合法")
        return false
      }else if (!this.user.password) {
        this.$message.error("请输入密码")
        return false
      }
      return true
    },
    handleUserLogin() {
      if (this.checkValid()) {
          this.$store.dispatch("user/login", this.user).then(()=>{
            this.$router.push('/')
            this.$message.success('登录成功')
          }).catch(e=>{
            console.log(e,'index')
            this.$message.error('登录失败，请检查用户名和密码是否错误')
          })
      }
    },
    resetForm() {
      Object.assign(this.$data, this.$options.data())
    },
    toRegister(){
      this.$router.replace('/register')
      console.log('toRegister')
    }
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // .login-outer-box {
  //     height: 30rem;
  //     width: 50rem;
  //     margin-top: 20rem;
  //     margin-bottom: 20rem;
  //     background-color: white;
  //     .login-box{
  //         display: flex;
  //         img {
  //             margin-left: 0;
  //             width: 30rem;
  //             opacity: 0.9;
  //         }
  //         border: 1px solid #ccc;
  //         box-shadow: 0 0 0.5rem 0.5rem #cccccc;
  //         width: 100%;
  //         height: 100%;
  //         background-repeat: no-repeat;
  //         display: flex;
  //         justify-content: center;
  //         align-items: center;
  //         .login-pannel{
  //             font-size: 16px;
  //             &-title {
  //                 font-size: 20px;
  //                 font-weight: 600;
  //             }
  //             input{
  //                 border: 0.1rem solid lightgrey;
  //                 border-radius: 1rem;
  //                 height: 2rem;
  //                 margin: 1rem;
  //                 width: 70%;
  //                 outline: none;

  //                 padding: 0.1rem 1rem
  //             }
  //             input:focus{
  //                 border-color: rgb(157, 204, 216);
  //             }
  //             &-link{

  //             }

  //         }
  // }
  // }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: rgb(71, 67, 67);
  }

  body {
    overflow: hidden;
  }
  /* 主体内容 样式 */
  .wrap {
    /* 备选方案2 */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(
      to right top,
      #dc7e7e,
      #e17172,
      #e56365,
      #e85359,
      #eb404c,
      #e85538,
      #e16925,
      #d67b11,
      #bba42f,
      #a1c468,
      #92dda7,
      #9cf1df
    );
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    background: url("@/assets/images/背景.jpg") no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
  }
  /* 头部样式 */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* z-index: 10; */
    padding: 20px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    overflow: hidden;
    border-bottom: double white 1px;
    background-color: rgba(245, 241, 241, 0.5);
  }
  header ul {
    padding-left: 1000px;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header ul li {
    font-size: 20px;
    font-weight: 400;
    margin-left: 5px;
    transition: all 0.5s linear;
    padding: 10px;
    border-radius: 20px;
  }
  header ul li:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #4a2c79;
    transform: scale(1.2);
  }
  header ul li.active {
    background: rgba(255, 255, 255, 0.5);
    color: #2b1055;
  }
  a:link,
  a:visited {
    color: rgb(17, 17, 17);
    text-decoration: none;
  }
  /* 导航栏部分 */
  .nav {
    padding-right: 50px;
  }
  .nav li {
    padding-right: 15px;
    font-family: "Times New Roman", Times, serif;
  }
  /* logo图标部分 */
  .logo {
    position: absolute;
    top: 20px;
    left: 40px;
  }
  .logo img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
  }

  /* 注册表单样式 */

  .form {
    width: 900px;
    height: 600px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
  }
  /* form左侧  图片部分*/
  .left {
    width: 500px;
    height: 600px;
  }

  /* form右侧 表单右侧 */
  .right {
    width: 400px;
    height: 600px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .right-con {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  /* 登录 标题 */
  h1 {
    font-size: 26px;
    color: #c46465;
    font-weight: 400;
    padding-bottom: 30px;
  }
  /* 登录 所填内容标题 */
  h3 {
    font-size: 16px;
    font-weight: 400;
    color: #97a10c;
    padding: 30px 0;
  }
  /* 填入表格的文字样式 */
  .text {
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #70b4e3;
    color: #366ae6;
    background-color: rgba(0, 0, 0, 0) !important;
    padding-left: 1rem;
  }
  /* 按钮样式 */
  .btn {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 40px;

    background-image: linear-gradient(120deg, #5fb45b 20%, #c2c23c 100%);
  }

  .btn:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .to-register {
    margin-top: 1.5rem;
    cursor: pointer;
  }
}
</style>
